<template>

  <div class="user">
    <el-card>
      <el-row>
        <el-form>
          <el-input v-model="input" size="small" placeholder="根据用户名进行搜索" />
          <el-button style="" size="mini" @click="empty">清空</el-button>
          <el-button size="mini" type="primary" @click.native="seach(input)">搜索</el-button>
        </el-form>
        <el-button type="success" @click="adduser">新增用户</el-button>
      </el-row>
      <el-alert
        type="info"
        show-icon
        :closable="false"
      >
        {{ countstext }}
      </el-alert>
      <el-table
        :header-cell-style="{background:'#fafafa',borderBottom:'2px solid #e8e8e8'}"
        :data="list"
        style="width: 100%"
        :row-style="{height:'30px'}"
      >
        <el-table-column
          align="center"
          prop="id"
          label="序号"
          width="180"
        />
        <el-table-column
          align="center"
          prop="email"
          label="邮箱"
          width="180"
        />
        <el-table-column
          align="center"
          prop="phone"
          label="联系电话"
        />
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
        />
        <el-table-column
          align="center"
          prop="permission_group_title"
          label="权限组名称"
        />
        <el-table-column
          align="center"
          prop="role"
          label="角色"
        />
        <el-table-column
          align="center"
          label="操作"
        >
          <template v-slot="scoped">
            <el-row v-if="scoped.row.id!==2">
              <el-button size="medium" type="primary" icon="el-icon-edit" circle @click="edituser(scoped.row.id)" />
              <el-button size="medium" type="danger" icon="el-icon-delete" circle @click="deleuser(scoped.row.id)" />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        style="text-align:right;margin-top:20px"
        background
        :current-page="queryInfo.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryInfo.pagesize"
        layout="total,prev, pager, next, sizes,  jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加用户弹框 -->
    <adduser ref="adduser" :is-show-dialg.sync="isShowDialg" :title="title" />

  </div>

</template>

<script>

import { userlist, deleteuser } from '@/api/user'
import adduser from '../components/addUser.vue'

export default {
  components: {
    adduser
  },

  data() {
    return {
      input: '',
      counts: 0, // 总条数,用在alert和分页上
      countstext: '',
      // 用户相关的请求参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: null,
        disabled: 0
      },
      list: [],
      isShowDialg: false,
      title: '新增用户',
      seachInfo: { // 搜索传递的参数
        page: 1,
        pagesize: 10,
        username: ''
      }

    }
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.Ulist(this.queryInfo)
  },
  // 方法集合
  methods: {
    // 获取用户列表
    async  Ulist(data) {
      const res = await userlist(data)
      console.log(res, '获取用户列表')
      this.list = res.list
      this.counts = res.counts
      this.countstext = `共 ${this.counts} 条数据`
    },
    adduser() {
      this.title = '新增用户'
      this.isShowDialg = true
    },
    // 当前每页显示多少数据
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      // 从新获取数据
      this.Ulist(this.queryInfo)
    },
    // 当前多少页
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.Ulist(this.queryInfo)
    },

    // 编辑
    edituser(id) {
      this.title = '编辑用户'
      this.isShowDialg = true
      this.$refs.adduser.userdetails(id)
    },
    // 删除
    async deleuser(id) {
      await this.$confirm('确认删除当前用户吗？')
      await deleteuser(id)
      this.$message.success('删除成功')
      this.Ulist(this.pageParams)
      // console.log(id)
    },
    // 搜索
    seach(text) {
      if (!text.trim()) {
        return this.Ulist(this.queryInfo)
      } else {
        console.log(111, text)
        this.seachInfo.username = text
        this.Ulist(this.seachInfo)
      }
    },
    // 清空
    empty() {
      this.input = ''
      // 重新获取数据
      this.Ulist(this.queryInfo)
    }
  }

}

</script>

<style scoped lang="scss">
.user{
  padding: 20px;
}
.el-card__body{
  padding: 20px;
}
.el-input{
width:200px;
height:32px !important
}
.el-row{
  display: flex;
justify-content: space-between;
}
.el-form{
  width: 100%;
}
.el-button--mini{
  margin-left: 10px;
  height: 32px;
  width: 50px;
}
.el-row{
  margin-bottom: 15px;
}
.el-table{
  margin-top: 15px;
  margin-bottom: 15px;

}
::v-deep .el-alert__icon{
    font-size: 16px;
    width: 16px;
    height: 16px;
    /* line-height: 16px; */
    margin-top: 4px;
}

</style>
